<style>
    .demo-search-wrapper {
        width: 800px;
        margin: 0px auto;
    }
    
    .demo-search-wrapper div.search {
        width: 100%;
        display: flex;
        justify-content: center;
        border-top: 1px solid #ccc;
    }
    
    .demo-search-wrapper input {
        height: 50px;
        width: 75%;
        line-height: 50px;
        border: 1px solid #cccccc;
        box-sizing: border-box;
        text-indent: 30px;
        font-size: 25px;
        outline: none;
        border-radius: 0px 0px 0px 20px;
        box-shadow: 0px 5px 5px 2px #ccc;
    }
    
    .demo-search-wrapper button {
        height: 50px;
        line-height: 50px;
        width: 25%;
        font-weight: bold;
        font-size: 40px;
        border: none;
        background: skyblue;
        color: aliceblue;
        text-align: center;
        outline: none;
        border-radius: 0px 0px 20px 0px;
        cursor: pointer;
        box-shadow: 0px 5px 5px 2px #ccc;
    }
    
    .demo-search-wrapper ul {
        width: 75%;
        /* display: none; */
        list-style: none;
        border: 1px solid #cccc;
        box-sizing: border-box;
        border-radius: 0px 0px 10px 10px;
        margin: 0px;
        padding: 0px;
        border-top: 0px;
        background: aliceblue;
    }
    
    .demo-search-wrapper li {
        height: 45px;
        width: 80%;
        margin: 0 auto;
        line-height: 45px;
        font-size: 25px;
        padding: 0px 30px;
        border-bottom: 1px solid #cccc;
        margin-top: 5px;
        color: darkgrey;
    }
    
    .demo-search-wrapper li:last-child {
        border-bottom: 0px;
    }
    
    .demo-search-wrapper li.on {
        background: #ccc;
        border-radius: 15px;
        color: white;
        font-size: 27;
    }
</style>

<div class="demo-search-wrapper">
    <div class="search">
        <input type="text" placeholder="请输入搜索内容">
        <button>GO!</button>
    </div>
    <div class="search-content">
        <ul>
        </ul>
    </div>
</div>
<script>
    !(function(document, window, $, undefined) {
        $('.demo-search-wrapper input').on('keyup', function(e) {
            let val = $('.demo-search-wrapper input').val()
            if (!val) {
                $('.demo-search-wrapper ul').html('')
                return
            }
            if (e.keyCode == 13) {
                let src = $('.demo-search-wrapper li.on').attr('targetSrc')
                let parentSrc = $('.demo-search-wrapper li.on').attr('parentSrc')
                let str = location.href.replace(location.pathname, '/')
                let locationHref = `${str}${parentSrc}/${src}`

                window.location.href = locationHref
            }
            if (e.keyCode == 38 || e.keyCode == 40) {
                let index = $(".demo-search-wrapper ul>li.on").index()
                if (e.keyCode == 38) {
                    --index;
                } else {
                    index = ++index % $(".demo-search-wrapper li").length
                }
                $(".demo-search-wrapper li").eq(index).addClass("on").siblings(".on").removeClass("on")
                $(".demo-search-wrapper input").val($("ul li.on").html())
                return
            }
            $.get("http://example.hyfarsight.com/ajax/search?", {
                    q: val
                },
                function(res) {
                    if (!Object.keys(res).length > 0 || !res.res) return
                    let arr = res.res.map((item, index) =>
                        item = `<li class="${index==0?"on":""}" targetSrc="${item.link}" parentSrc="${item.type}">${item.text}</li>`
                    )
                    $('.demo-search-wrapper ul').html(arr.join(''))
                        .slideDown()
                },
                "json"
            );
        })
    })(document, window, jQuery)
</script>